<script setup>
import {
  Edit, Delete,
  Check,
  Message,
  Search,
  Star, Close,

} from "@element-plus/icons-vue";
import { onUpdated, ref } from "vue";
import Pass from '@/assets/pass.png'
import Reject from '@/assets/reject.png'

//信息样例
const messages = ref([
  {
    id: 1,
    title: "速冻丸子库低温警告",
    content: "请移出",
    state: "已读",
    messageType: 3,
    sendUser: 1,
    receiveUser: 5,
    createTime: "2024-03-16T15:11:57",
  },
]);

//获取消息类型
import useSystemParameter from "@/stores/useSystemParameter";
const systemParameter = useSystemParameter();
import { messageListService, applicationService } from "@/api/message";
const messageTypes = ref(systemParameter.messageTypes);
console.log(messageTypes.value);
//结果参考
// {id: 1, typeName: '申请', createTime: null, updateTime: null}
// {id: 2, typeName: '通知', createTime: null, updateTime: null}
// {id: 3, typeName: '警报', createTime: null, updateTime: null}

//搜索框绑定数据
const SearchType = ref("");
const SearchState = ref("");

//分页条数据模型
const pageNum = ref(1); //当前页
const total = ref(); //总条数
const pageSize = ref(5); //每页条数

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size;
  messageList();
};
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNum.value = num;
  messageList();
};

const messageList = async () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    messageType: SearchType.value ? SearchType.value : null,
    state: SearchState.value ? SearchState.value : null,
  };
  let result = await messageListService(params);
  //渲染到视图上
  total.value = result.data.total;
  messages.value = result.data.items;

  //为messages扩展一个属性typename,用于显示分类名称
  for (let i = 0; i < messages.value.length; i++) {
    let message = messages.value[i]; //当前文章数据
    message.typeName = systemParameter.getMessageTypeName(message.messageType);
    console.log(message);

    // for (let j = 0; j < messageTypes.value.length; j++) {
    //   if (messageTypes.value[j].id == message.messageType) {
    //     //当前分类id成功匹配到类别，给予名字
    //     message.typeName = messageTypes.value[j].typeName;
    //     // article.categoryName = categorys.value[j].categoryName;
    //   }
    // }
  }

  if (result.status === 1) {
    ElMessage.error(result.message ? result.message : "查找失败");
  } else if (result.data.total === 0) {
    ElMessage.error("没有符合条件的信息");
  }
  console.log("共查询到" + result.data.total + "条信息");
};
messageList();

// //获取文章分类
// const articleCategoryList = async () => {
//     //调用接口，获取动态数据库中的文章列表数据
//     let result = await articleCategoryListService();
//     categorys.value = result.data;
// }
// articleCategoryList()

import { Plus } from "@element-plus/icons-vue";
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
//导入token
import { useTokenStore } from "@/stores/token.js";
const tokenStore = useTokenStore();
import { ElMessage } from "element-plus";
import avatar from "@/assets/default.png";

// //上传成功的回调函数
// const uploadSuccess = (result) => {
//     registerData.value.userPic = result.data;
//     console.log(result.data);
// }

const detailMessage = ref({
  id: 1,
  title: "速冻丸子库低温警告",
  content: "请移出",
  state: "已读",
  messageType: 3,
  sendUser: null,
  receiveUser: 5,
  createTime: "2024-03-16T15:11:57",
  time: 0,
});
let hasClose = false; //是否被关闭过，用于自动标记已读
const title = ref("");
const dialogVisible_deteil = ref(false);
const dialogVisible_deteil_2 = ref(false); //替身框框
import { getUserByIdService, getRoleByUserNameService } from "@/api/user.js";
import useUserInfoStore from "@/stores/userInfo";
const userInfoStore = useUserInfoStore(); //当前收件人信息
const showDetail = async (row) => {
  //渲染数据
  detailMessage.value.messageType = row.messageType;
  detailMessage.value.typeName = row.typeName;
  detailMessage.value.title = row.title;
  detailMessage.value.content = row.content;//当messageType=1时，为Application的id
  detailMessage.value.state = row.state;
  detailMessage.value.createTime = row.createTime;
  detailMessage.value.id = row.id;
  //发送者
  //调用接口，原本sendUser是id，触发后换成对象  
  let result = await getUserByIdService(row.sendUser);
  detailMessage.value.sendUser = result.data;
  // console.log(detailMessage.value.sendUser);
  // result = await getRoleByUserNameService(detailMessage.value.sendUser.username); //获取权限名
  detailMessage.value.sendUser.roleName = systemParameter.getRoleName(detailMessage.value.sendUser.role);


  //不同类型的数据渲染
  if (detailMessage.value.messageType === 1) {
    //申请审批
    title.value = "申请审批";
    //调用接口获取申请实体application
    result = await applicationService(detailMessage.value.content);
    detailMessage.value.content = result.data;

  } else if (detailMessage.value.messageType === 2 || detailMessage.value.messageType === 3) {
    title.value = "消息详细";
  } else {
    ElMessage.error("不是应该有的类型！");
  }


  console.log(detailMessage.value.time);
  if (detailMessage.value.state === "未读" && detailMessage.value.time !== 0) {
    //需要延时，先展示替身框框
    dialogVisible_deteil_2.value = true;
    ElMessage.success("操作太急，勿动，稍等！");
    setTimeout(async () => {
      ElMessage.success("等好了");
      if (dialogVisible_deteil_2.value) {
        //替身框还在，展示回真身框框
        dialogVisible_deteil.value = true;
        dialogVisible_deteil_2.value = false;
        AutoRead();
      } //替身框不在了，不需要执行
    }, 1000 * detailMessage.value.time);
  } else {
    //不用等
    dialogVisible_deteil.value = true;
    AutoRead();
  }

};

//延迟5s标记已读，检测状态，当主框未关闭才生效
const AutoRead = () => {
  if (detailMessage.value.state === "未读") {
    //开启倒计时
    detailMessage.value.time = 5;
    //未读信件
    hasClose = false;
    console.log(hasClose);
    setTimeout(async () => {
      // 延时5秒标记已读
      console.log(hasClose);
      if (dialogVisible_deteil.value === true && hasClose === false && detailMessage.value.state === "未读") {
        //还处在查看页
        read(detailMessage.value.id);
        ElMessage.success("5秒了，自动标记已读");
      }
    }, 5000);
    setTimeout(async () => {
      detailMessage.value.time = 4;
    }, 1000);
    setTimeout(async () => {
      detailMessage.value.time = 3;
    }, 2000);
    setTimeout(async () => {
      detailMessage.value.time = 2;
    }, 3000);
    setTimeout(async () => {
      detailMessage.value.time = 1;
    }, 4000);
    setTimeout(async () => {
      detailMessage.value.time = 0;
    }, 5000);
  }
}

import { computed } from "vue";
import coverImage from "@/assets/readed.png";
// 计算背景图片的样式
const cardBackgroundStyle = computed(() => {
  return {
    backgroundImage: detailMessage.value.state === "已读" ? `url(${coverImage})` : null,
    backgroundSize: "60px",
    backgroundPosition: "80% 80%",
    backgroundRepeat: "no-repeat",
  };
});

import { messageReadSerive } from "@/api/message.js";
//标记已读
const read = async (msgId) => {
  const result = await messageReadSerive(msgId);
  if (result.code === 0) {
    // console.log()
    detailMessage.value.state = "已读";
    messageList(); //刷新
    // dialogVisible_deteil = false
  }
};

const closeDialog = () => {
  hasClose = true;
};

//申请处理
import { applicationHandleService } from "@/api/message";
import { userInfoUpdateService } from "@/api/user.js";
const handleApplication = async (command) => {//处理命令，pass/reject
  let result;
  console.log(detailMessage.value.content)
  if (command === "pass") {
    // ElMessage.success("通过");
    console.log(detailMessage.value.sendUser)
    detailMessage.value.sendUser.role = detailMessage.value.content.newRole;
    result = await userInfoUpdateService(detailMessage.value.sendUser);
    if (result.code === 0) {
      result = await applicationHandleService(detailMessage.value.content.id, 'passed');
      if (result.code === 0) {
        ElMessage.success("状态改为通过，授权成功");
        if (detailMessage.value.state !== '已读') {
          read(detailMessage.value.id);
        }
      }
    }

  } else if (command === "reject") {
    result = await applicationHandleService(detailMessage.value.content.id, 'rejected');
    if (result.code === 0) {
      ElMessage.success("状态改为拒绝，不授权");
      if (detailMessage.value.state !== '已读') {
        read(detailMessage.value.id);
      }
    }
  } else if (command === "waiting") {
    // ElMessage.success("等待")
    detailMessage.value.sendUser.role = detailMessage.value.content.oldRole;
    console.log(detailMessage.value);
    result = await userInfoUpdateService(detailMessage.value.sendUser);
    if (result.code === 0) {
      await applicationHandleService(detailMessage.value.content.id, 'waiting');
      if (result.code === 0) {
        ElMessage.success("状态改为等待，授权撤回成功");
      }
    }
  }
  //调用接口，重新渲染：申请实体、发送者信息
  result = await applicationService(detailMessage.value.content.id);
  detailMessage.value.content = result.data;
  result = await getUserByIdService(detailMessage.value.sendUser.id);
  detailMessage.value.sendUser = result.data;
  detailMessage.value.sendUser.roleName = systemParameter.getRoleName(detailMessage.value.sendUser.role);

}

// function getRoleName(role) {
//   const rolesData = [
//     { id: 1, role: "initial", roleName: "新用户", createTime: null, updateTime: null },
//     { id: 2, role: "engineer", roleName: "工程师", createTime: null, updateTime: null },
//     { id: 3, role: "customer", roleName: "客户", createTime: null, updateTime: null },
//     { id: 4, role: "admin", roleName: "系统管理员", createTime: null, updateTime: null },
//     { id: 5, role: "all", roleName: "全权限测试用户", createTime: null, updateTime: null },
//     { id: 6, role: "freeze", roleName: "冻结用户", createTime: null, updateTime: null }
//   ];

//   const roleObj = rolesData.find(r => r.role === role);
//   return roleObj ? roleObj.roleName : 'Role not found';
// }

// function getRoleName(role) {
//   const roles = ref(systemParameter.roles);
//   const roleObj = roles.value.find((r) => r.role === role);
//   return roleObj ? roleObj.roleName : "Role not found";
// }


// function getRoleName(role) {
//   const roles = systemParameter.roles;
//   const roleObj = roles.value.find((r) => r.role === role);
//   return roleObj ? roleObj.roleName : "Role not found";
// }

//删除消息处理
import { messageDeleteServie } from '@/api/message'
const deleteRow = async (row) => {
  const result = await messageDeleteServie(row.id);
  if (result.code === 0) {
    ElMessage.success(result.message);
  }
  console.log(result.value);
  messageList();
}
</script>
<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>我的信箱</span>
        <!-- <div class="extra">
                    <el-button type="primary" @click="visibleDrawer = true">注册用户</el-button>
                </div> -->
      </div>
    </template>
    <!-- 搜索表单 -->
    <el-form inline>
      <el-form-item label="类型：">
        <el-select placeholder="所有" v-model="SearchType" style="width: 200px">
          <el-option v-for="c in messageTypes" :key="c.id" :label="c.typeName" :value="c.id"
            @click="messageList(), console.log(c.id)">
          </el-option>
          <el-option label="所有" value="" @click="messageList()"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态（已读/未读）：">
        <el-select placeholder="所有" v-model="SearchState" style="width: 200px">
          <el-option label="未读" value="未读" @click="messageList()"> </el-option>
          <el-option label="已读" value="已读" @click="messageList()"> </el-option>
          <el-option label="所有" value="" @click="messageList()"> </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="模糊匹配：">
                <el-input v-model="searchString" style="width: 240px" placeholder="请输入" clearable
                    @change="userList();" />
            </el-form-item> -->
      <!-- <el-form-item>详细：<el-switch v-model="isShowMore" /></el-form-item> -->
    </el-form>

    <!-- 消息列表 -->
    <el-table :data="messages" style="width: 100%">
      <el-table-column label="标题" prop="title"></el-table-column>
      <el-table-column label="类型" prop="typeName">
        <!-- <el-button :icon="Edit" circle plain type="primary" @click="showEditForm(row)"></el-button> -->
        <!-- <img src="@/assets/detailMessage.png" alt="icon" class="button-image" /> -->
        <template #default="{ row }">
          <div v-if="row.messageType === 3">
            <el-tag type="warning"> {{ row.typeName }}</el-tag>
          </div>
          <div v-else-if="row.messageType === 1">
            <el-tag type="info"> {{ row.typeName }}</el-tag>
          </div>
          <div v-else-if="row.messageType === 2">
            <el-tag type="success"> {{ row.typeName }}</el-tag>
          </div>
        </template>
      </el-table-column>

      <!-- <el-table-column label="正文" prop="content"></el-table-column> -->
      <el-table-column label="时间" prop="createTime"></el-table-column>
      <el-table-column label="详情状态" prop="state">
        <template #default="{ row }">
          <el-button circle plain type="primary" class="button-with-image" @click="showDetail(row)"
            style="margin-right: 35px;">
            <img src="@/assets/detailMessage.png" alt="icon" class="button-image" />
            <br />
            <div v-if="row.state === '未读'">
              {{ row.state }}
              <el-badge is-dot class="item">
                <div></div>
              </el-badge>
            </div>
            <div v-else>
              {{ row.state }}
            </div>
          </el-button>

          <el-popconfirm confirm-button-text="删除" cancel-button-text="再想想" :icon="InfoFilled" icon-color="#626AEF"
            title="确定删除这条已读消息?" @confirm="deleteRow(row)">
            <template #reference>
              <el-button circle plain type="primary" class="button-with-image" v-if="row.state === '已读'">
                <img src="@/assets/delete.png" alt="icon" class="button-image" />
                删除</el-button>
            </template>
          </el-popconfirm>


          <!-- 你可以直接在这里使用 row.state，无需再通过 child-component 传递 -->


        </template>
      </el-table-column>
      <!-- <el-table-column label="头像" prop="userPic" v-if="isShowMore">
                <template #default="{ row }">
                    <el-upload ref="uploadRef" class="avatar-show" :show-file-list="false" :auto-upload="false"
                        action="/api/upload" name="file" :headers="{ 'Authorization': tokenStore.token }"
                        :on-success="uploadSuccess">
                        <img :src="row.userPic ? row.userPic : avatar" class="avatar" />
                    </el-upload>
                </template>
            </el-table-column>
            <el-table-column label="注册时间" prop="createTime" v-if="isShowMore"></el-table-column>
            <el-table-column label="更新时间" prop="updateTime" v-if="isShowMore"></el-table-column>
            <el-table-column label="权限" prop="role">
                <template #default="{ row }">
                    <div style="margin-top:">
                        <el-radio-group v-model="row.role" size="small" :class="{ 'custom-radio': true }">
                            <el-radio v-for="c in roles" :label='c.roleName' :value="c.role" @change="updateUser(row)"
                                :class="{ 'custom-radio': true }"></el-radio>
                        </el-radio-group>
                    </div>
                </template>
            </el-table-column> -->

      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
    <!-- 分页条 -->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
      layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
      @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />

    <!-- 消息详细展示表单 -->
    <el-dialog v-model="dialogVisible_deteil" :title="detailMessage.title" width="60%" @close="closeDialog()">
      <el-card class="page-container" :style="cardBackgroundStyle">
        <!-- 称呼 -->
        <!-- <div>
          尊敬的[{{ userInfoStore.roleName }}]
          {{
          userInfoStore.info.nickname
            ? userInfoStore.info.nickname
            : userInfoStore.info.username
        }}：
        </div> -->

        <!-- 正文 -->
        <div v-if="detailMessage.messageType === 1">
          <el-tag type="info"> {{ detailMessage.typeName }}</el-tag>
          <!-- 申请信正文 -->
          权限变更申请：{{ systemParameter.getRoleName(detailMessage.content.oldRole) }} -> {{
          systemParameter.getRoleName(detailMessage.content.newRole) }}
          <el-button plain type="primary" class="button-with-image" circle @click="handleApplication('pass')"
            v-if="detailMessage.content.state === 'waiting'"><img src="@/assets/pass.png"
              class="button-image" /></el-button>
          <el-button plain type="primary" class="button-with-image" circle @click="handleApplication('reject')"
            v-if="detailMessage.content.state === 'waiting'"><img src="@/assets/reject.png"
              class="button-image" /></el-button>
          <el-button plain type="primary" class="button-with-image" circle @click="handleApplication('waiting')"
            v-else><img src="@/assets/reset.png" class="button-image" />撤回</el-button>


        </div>
        <div v-else-if="detailMessage.messageType === 2">
          <el-tag type="success"> {{ detailMessage.typeName }}</el-tag>
          <!-- 通知信正文 -->
          {{ detailMessage.content }}
        </div>
        <div v-else-if="detailMessage.messageType === 3">
          <el-tag type="warning"> {{ detailMessage.typeName }}</el-tag>
          <!-- 警告正文 -->
          {{ detailMessage.content }}
        </div>
        <!-- 落款 -->
        <!-- 由系统账户发出的，特殊处理 -->
        <div align="right" v-if="detailMessage.sendUser.username !== 'system'">
          {{ detailMessage.sendUser.roleName }}
          {{
          detailMessage.sendUser.nickname
            ? detailMessage.sendUser.nickname
            : detailMessage.sendUser.username
        }}
        </div>
        <div align="right" v-else>系统通知</div>
        <!-- 时间 -->
        <div align="right">{{ detailMessage.createTime }}</div>
      </el-card>

      <!-- <el-descriptions :title="detailMessage.title" direction="vertical" :column="4" border>
                <el-descriptions-item label="状态">{{ detailMessage.state }}</el-descriptions-item>
                <el-descriptions-item label="类型" :span="2">
                    <div v-if="detailMessage.messageType === 3">
                        <el-tag type="warning"> {{ detailMessage.typeName }}</el-tag>
                    </div>
                    <div v-else-if="detailMessage.messageType === 1">
                        <el-tag type="info"> {{ detailMessage.typeName }}</el-tag>
                    </div>
                    <div v-else-if="detailMessage.messageType === 2">
                        <el-tag type="success"> {{ detailMessage.typeName }}</el-tag>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="时间">
                    <el-tag size="small">{{ detailMessage.createTime }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="操作人">
                    <el-link>
                        {{ detailMessage.sendUser.nickname ? detailMessage.sendUser.nickname : detailMessage.sendUser.username }}
                        <i class="el-icon-view el-icon--right" @click=""></i>
                    </el-link>
                </el-descriptions-item>
                <el-descriptions-item label="正文">{{ detailMessage.content }}</el-descriptions-item>
            </el-descriptions> -->

      <!-- <el-form :model="detailMessage" label-width="100px" style="padding-right: 30px">
                <el-form-item label="正文">
                    <el-input v-model="detailMessage.content" disabled type="textarea" autosize></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-input v-model="detailMessage.state" disabled></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-input v-model="detailMessage.typeName" disabled></el-input>
                </el-form-item>
                <el-form-item label="时间">
                    <el-input v-model="detailMessage.createTime" disabled></el-input>
                </el-form-item>
            </el-form> -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible_deteil = false">返回</el-button>
          <el-button type="primary" @click="read(detailMessage.id)" v-if="detailMessage.state === '未读'">
            ({{ detailMessage.time }})标记已读
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 替身框，同上 -->
    <el-dialog v-model="dialogVisible_deteil_2" :title="detailMessage.title" width="60%">
      <el-card class="page-container" :style="cardBackgroundStyle">
        <!-- 称呼 -->
        <div>
          尊敬的[{{ userInfoStore.roleName }}]
          {{
          userInfoStore.info.nickname
            ? userInfoStore.info.nickname
            : userInfoStore.info.username
        }}：
        </div>

        <!-- 正文 -->
        <div v-if="detailMessage.messageType === 1">
          <el-tag type="info"> {{ detailMessage.typeName }}</el-tag>
          <!-- 申请信正文 -->
          权限变更申请：{{ systemParameter.getRoleName(detailMessage.content.oldRole) }} -> {{
          systemParameter.getRoleName(detailMessage.content.newRole) }}
          <el-button plain type="primary" class="button-with-image" circle @click="handleApplication('pass')"
            v-if="detailMessage.content.state === 'waiting'"><img src="@/assets/pass.png"
              class="button-image" /></el-button>
          <el-button plain type="primary" class="button-with-image" circle @click="handleApplication('reject')"
            v-if="detailMessage.content.state === 'waiting'"><img src="@/assets/reject.png"
              class="button-image" /></el-button>
          <el-button plain type="primary" class="button-with-image" circle @click="handleApplication('waiting')"
            v-else><img src="@/assets/reset.png" class="button-image" />撤回</el-button>
        </div>
        <div v-else-if="detailMessage.messageType === 2">
          <el-tag type="success"> {{ detailMessage.typeName }}</el-tag>
          <!-- 通知信正文 -->
          {{ detailMessage.content }}
        </div>
        <div v-else-if="detailMessage.messageType === 3">
          <el-tag type="warning"> {{ detailMessage.typeName }}</el-tag>
          {{ detailMessage.content }}
        </div>
        <!-- 落款 -->
        <!-- 由系统账户发出的，特殊处理 -->
        <div align="right" v-if="detailMessage.sendUser.username !== 'system'">
          {{ detailMessage.sendUser.roleName }}
          {{
          detailMessage.sendUser.nickname
            ? detailMessage.sendUser.nickname
            : detailMessage.sendUser.username
        }}
        </div>
        <div align="right" v-else>系统通知</div>
        <!-- 时间 -->
        <div align="right">{{ detailMessage.createTime }}</div>
      </el-card>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible_deteil_2 = false">返回</el-button>
          <el-button type="primary" @click="read(detailMessage.id)" v-if="detailMessage.state === '未读'">
            ({{ detailMessage.time + 5 }})标记已读
          </el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>
<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.avatar-show {
  :deep() {
    .avatar {
      width: 50px;
      height: 50px;
      display: block;
    }

    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }

    .el-upload:hover {
      border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }
}

//多选样式
.custom-radio {
  width: 40px;
  /* 设置按钮的固定宽度，可以根据需要调整 */
}

/* 抽屉样式 */
.avatar-uploader {
  :deep() {
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }

    .el-upload:hover {
      border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }
}

.editor {
  width: 100%;

  :deep(.ql-editor) {
    min-height: 200px;
  }
}

//图像按钮
.button-with-image {
  position: relative;
  // border:1px solid rgb(23, 110, 172);
  /* 确保按钮内部的定位基于按钮本身 */
  padding: 0;
  /* 根据需要调整内边距以适应图像 */
}

.button-with-image .button-image {
  max-width: 100%;
  /* 限制图像的最大宽度 */
  max-height: 100%;
  /* 限制图像的最大高度 */
  display: block;
  /* 避免底部的空白间隙 */
  border-radius: 50%;
  /* 使图像显示为圆形 */
}

/* 为 el-badge 添加左边距 */
.item {
  margin-left: 0.3em;
  /* 1em 大约相当于当前字体大小的空间，可以根据需要调整 */
}
</style>
